<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding:0px;
            box-sizing: border-box;
        }
        #warp{width:100%}
        .container{width:100%;position: absolute;top:0;border:1px solid}
        img{width:100%}
        #warp{position: relative;}
        #login_bg img{width:100%}
        #login_input_bg{width:94%;position: absolute;top: 1060px;left:3%;height: 700px;border:1px solid}
        #login_input_bg img{width:100%;}
        #box{width:90%;height:80%;position: absolute;top: 10%;left:10%;/* border:1px solid */}
        #box1{width:80%;height:110px;margin-left: 10%}
        #box1 input{width:100%;height: 110px ;font-size:38px;border:none;border-radius:44px;padding-left: 58px; outline: none;}
        #box2{margin-left:15%;width:70%;height:150px;margin-top:35px;/*border-bottom:1px solid #959595;*/position: relative;}
        #veryCode{width:88px;position: absolute;left:41%;top:54%;display:none;}
        #read {width:220px;position: absolute;left:16%;top:39%;display:none;}
        #box2 input{width:86%;height:43%;position: absolute;top:27%; font-size:16px;border:none;border-radius: 18px;padding-left: 30px; outline: none;}
        #msg {width:70%;height:43%;position: absolute; left:15%;top:35%; font-size:16px;border:none; text-align: center;font-size: 13px;color:white;
            outline: none;opacity: 1;background-color: rgba(0, 0, 0, .6);z-index: 100;line-height: 210%;display:none;}
        #sec{/*border:1px solid;*/width: 90px;height:42px;position: absolute; left:57%;top:25.8%;line-height: 42px;text-align: center;
            font-size: 15px;color:#5A99F8;/*background-color: #4D4D4D;*/border-radius: 16px;}
        #box3{position: relative;width:100%;height:15%;/* border-bottom:1px solid */;margin-top: 25px;margin-left:-9%}
        #desc{position: absolute; left:22%;top:23px;/* border:1px solid; */text-align: center;}
        #box3{margin-left:2px;font-size: 32px;}
        #box3 a{color:#FFFFFF;text-decoration:none}
        #check{position: absolute; left:16%;top:21%;width: 36px;/* border: 1px solid; */}
        #check img{width: 100%;margin-top: 23%;}
        #box4{position:absolute;left:10%;margin-top:30px;width:80%;text-align: center;color:#FFFFFF;font-size: 32px;line-height: 50px/* border-bottom:1px solid */}
        #box4 img{width:100%}
        #box5{position:absolute;left:30%;margin-top:314px;width:40%;padding-bottom: 50px;/* border-bottom:1px solid */}
        #box5 img{width:100%}
        #box6{width:98%;margin-left:1%;margin-top: 400px;color: #FFFFFF;font-size: 32px;line-height: 52px}
        #box7{text-align: center;margin-top: 160px;color: #FFFFFF;font-size: 64px;}
        #guanzhu{width:95%;height:80%;position: absolute;top: 314px;left:2%;/* border:1px solid */}
        #desced{position: absolute; left:17%;top:110%;/* border:1px solid; */text-align: center;font-size:12px;color:red;/* display:none */}
    </style>
</head>
<body>
<div id="warp"><img src="../gd/bg.jpg" alt="" /></div>
<div class="container">
    <div id="login_input_bg">
        <!--    <img src="img/login/login_input_bg.png" alt="">-->

        <div id="box1">
            <input type="text" id="phone" placeholder="请输入手机号">
        </div>
        <div id="box2"><img src="../gd/办理按钮.gif" alt=""></div>
        <div id="box3">

            <div id="check"><img src="../gd/check.png" alt=""></div>
            <div id="desc"><a href="html/introduction.html">我已阅读并同意《活动规则》、《隐私条款》等协议</a></div>
            <div id="read"><img alt="" src="../gd/read.gif"></div>
            <!--<div id="desc"><a href="introduction.html"><img alt="" src="img/login/read.gif"></a></div>-->
            <div id="desced"></div>
        </div>

        <div id="box4">
            <p>知护星优品包</p>
            <p>业务资费：20元/月</p>
            <p>如需退订可致电客服热线：4008121680</p>
        </div>
        <div id="box5"><img src="../gd/业务说明-标题.png" alt=""></div>
        <div id="box6">
            <p>1、业务名称：知护星优品包</p>
            <p>2、业务资费：20元/月</p>
            <p>3、活动对象：广东移动手机用户</p>
            <p>4、知护星会员权益:关注微信公众号“广东移动智慧校园”，可以查看和使用知护星会员权益。知护星一款素质教育知识产品，产品包含国学启蒙、美育知识。</p>
            <p>5、知护星会员权益领取方式：关注“广东移动智慧校园”微信公众号或小程序，用广东移动手机号进行登录，找到知护星业务即可使用知护星会员权益；</p>
            <p>6、每个手机号仅限参与一次，业务开通立即生效，本产品长期有效，费用按月扣取。</p>
            <p>7、退订方式：<br>
                方式一:发送短信0000至10086，按提示内容退订。<br>
                方式二:拨打客服热线4008121680即可人工退订。<br>
            </p>
            <p>8、如有疑问可致客服热线:4008121680</p>
        </div>
        <div id="box7">
            客服热线：4008121680
        </div>
    </div>
</div>
<script>
    $("#check").on("click", function() {
        var url = this.children[0].src;
        //alert(url);
        if(url.indexOf("checked")>0){
            this.children[0].src="img/login/check.png";
        }else{
            this.children[0].src="img/login/checked.png";
            //$("#desced").css({"display":"none"});
            $("#desced").text("");
        }

    })
    $("#box4").on("click", function() {
        var code = $("#code").val();
        var phone = $("#phone").val();
        var url = $("#check").children(0).attr("src");
        if(!(/^1[3456789]\d{9}$/.test(phone))){
            $("#desced").text("手机号码有误，请重填");
            $("#veryPhone").css({"display":"block"});
            return false;
        }else{
            $("#veryPhone").css({"display":"none"});
            $("#desced").text("")
        }
        if(code==""){
            $("#veryCode").css({"display":"block"});
            return false;
        }else{
            $("#veryCode").css({"display":"none"});
        }
        if(!(url.indexOf("checked")>0)){
            //$("#desced").css({"display":"block"});
            $("#desced").text("请勾选阅读");
            //$("#desc").css({"display":"none"});
            $("#read").css({"display":"block"});
            return;
        }else{
            $("#read").css({"display":"none"});
        }
        $.ajax({
            type: "post",
            dataType: "json",
            url: 'login?phone='+phone+"&code="+code,
            async:true,
            success: function (json) {
                code = json.code;
                msg = json.msg;
                if(code=="0"){
                    window.location.href ="index/firstPage";
                }
                if(code=="5"){
                    $("#msg").css({"display":"block"});
                    setTimeout(function() {
                        $("#msg").css({"display":"none"});
                    }, 1000*5);
                }else{
                    $("#desced").text(msg);
                }
            },
            error: function (obj,data ,msg) {

            }
        });

    })
</script>
</body>
</html>